<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #addStudent {
            float: right;
        }
        
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            display: none;
        }
        
        #pop {
            position: fixed;
            width: 600px;
            padding: 20px 50px;
            background: white;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            display: none;
        }
        
        #pop .pop-wrap {
            float: right;
            margin-top: 20px;
        }
        
        #pop h2 {
            margin-bottom: 20px;
        }
        
        select {
            margin-top: 10px;
        }
        
        h4 {
            cursor: pointer;
        }
        
        #relogin {
            color: rgb(51, 51, 236);
        }
        
        #relogin:hover {
            color: red;
            font-weight: 600;
        }
        
        #worn {
            width: 300px;
            height: 150px;
            background: burlywood;
            position: fixed;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            border-radius: 10px;
            display: none;
        }
        
        #worn>h4 {
            line-height: 70px;
            text-align: center;
            color: red;
        }
        
        #reEdit {
            margin-left: 120px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <h4>
            <span id="data-username"></span>
            <span id="data-type">学生：您好！</span>
            <span id="relogin">退出登录</span>
        </h4>
        <hr>
        <button class="btn btn-primary" id="addStudent">添加学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="pop">
        <h2 id="text">添加学生信息</h2>

        <div class="form-horizontal">

            <div class="form-group hide">
                <label for="data-id" class="col-sm-2 control-label">学号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-id" placeholder="学生学号">
                </div>
            </div>

            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                        <input type="radio" name="sex"  id="data-male" checked>男
                    </label>
                <label class="radio-inline">
                        <input type="radio" name="sex" id="data-female">女
                    </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-joinDate" placeholder="入学日期" onclick="WdatePicker()">
                </div>
            </div>

            <div class="form-group pop-wrap">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>

    <div id="worn">
        <h4>请重新编辑</h4>
        <button id="reEdit" class="btn btn-primary">确定</button>
    </div>



    <script src="lib/jquery.min.js"></script>
    <script src="lib/citys.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script src="lib/echarts.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        //登录验证
        let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=", "");
        if (!userInfo) {
            location.href = `${address}/login.html`;
        }

        //显示用户信息及退出登录功能
        $("#data-username").html(JSON.parse(userInfo)[0].username);
        $("#data-type").html(JSON.parse(userInfo)[0].usertype ? "老师" : "学生");
        $("#relogin").click(function() {
            sessionStorage.removeItem("userInfo");
            document.cookie = "userInfo=xxx,expires=" + new Date("1970-01-01");
            location.href = `${address}/login.html`;
        })

        let template = $("#template");
        //删除请求
        template.find(".data-delete").click(function() {
            let nowTr = $(this).closest("tr");
            if (confirm(`真的要删除${nowTr.find(".data-name").html()}同学吗？`)) {

                $.ajax({
                    url: `${address}/deleteStudent`,
                    data: {
                        id: $(this).closest("tr").find(".data-id").html()
                    },
                    success(data) {
                        if (data === "success") {
                            nowTr.fadeOut();
                        } else {
                            alert("删除失败!");
                        }
                    }
                })
            }
        })

        //编辑请求 
        template.find(".data-edit").click(function() {
            $("#mask").fadeIn();
            $("#pop").fadeIn();
            $("#data-name").focus();
            $("#text").html("修改学生信息");
            $("#submit").html("确认修改");
            let editid = $(this).closest("tr").find(".data-id").html();
            let editName = $(this).closest("tr").find(".data-name").html();
            let editAge = $(this).closest("tr").find(".data-age").html();
            let editSex = $(this).closest("tr").find(".data-sex").html();
            let editCity = $(this).closest("tr").find(".data-city").html();
            let editDate = $(this).closest("tr").find(".data-joinDate").html();
            let nowname = $("#data-name").val(editName);
            let nowage = $("#data-age").val(editAge);
            let nowdate = $("#data-joinDate").val(editDate);
            let nowid = $("#data-id").val(editid);
            if (editSex === "女") {
                $("#data-female").attr("checked", "checked");
            }
        })


        //添加和修改请求
        $("#submit").click(function() {
            if ($("#data-name").val() && $("#data-age").val() && $("#text").html() === "添加学生信息") {
                $.ajax({
                    url: `${address}/addStudent`,
                    data: {
                        name: $("#data-name").val(),
                        age: $("#data-age").val(),
                        sex: $("#data-female")[0].checked ? 0 : 1,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        joinDate: $("#data-joinDate").val(),
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0);
                        } else {
                            alert("操作失败")
                        }
                    }
                })
            }
            if ($("#text").html() === "修改学生信息" && $("#data-name").val() && $("#data-age").val()) {
                let lastid = $("#data-id").val();
                let lastname = $("#data-name").val();
                let lastage = $("#data-age").val();
                let lastcity = $("#province").val() + $("#city").val() + $("#area").val();
                let lastdate = $("#data-joinDate").val();
                $.ajax({
                    url: `${address}/newUser`,
                    data: {
                        id: lastid,
                        name: lastname,
                        age: lastage,
                        sex: $("#data-male")[0].checked ? 1 : 0,
                        city: lastcity,
                        joindate: lastdate
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0);
                        } else {
                            alert("重新编辑")
                        }
                    }
                })
            } else {
                $("#worn").fadeIn();
            }
        })

        window.onkeydown = function(event) {
                if (event.keyCode === 13) {
                    $("submit").click();
                }
                if (event.keyCode === 27) {
                    $("cancel").click();
                }
            }
            //新增学生显示弹出层
        $("#addStudent").click(function() {
            $("#mask").fadeIn();
            $("#pop").fadeIn();
            $("#data-name").focus();
        })
        $("#cancel").click(function() {
            $("#mask").fadeOut("fast");
            $("#pop").fadeOut("fast");
        })
        $("#reEdit").click(function() {
            $("#worn").fadeOut();
        })

        //增加学生信息，并存到数据库
        $.ajax({
            url: `${address}/getStudentList`,
            success(data) {
                let tbody = $(".tbody");
                data.forEach(item => {
                    let newTr = template.clone(true).attr("id", "");
                    newTr.find(".data-id").html(item.id);
                    newTr.find(".data-name").html(item.name);
                    newTr.find(".data-age").html(item.age);
                    newTr.find(".data-sex").html(item.sex ? "男" : "女");
                    newTr.find(".data-city").html(item.city);
                    newTr.find(".data-joinDate").html(item.joindate);
                    newTr.appendTo(tbody);
                })
            }
        })
    </script>
</body>

</html>